<template>
  <div class="link-info-item">
    <img v-if="outLinkInfo.imageUrl" class="link-qrcode link-qrcode-image" width="96" height="96" :src="outLinkInfo.imageUrl" :alt="$t('configLazyLoad.channel.noGeneImg')">
    <div v-else-if="!outLinkInfo.imageUrl" class="link-qrcode link-qrcode-image__div"><span>{{$t('configLazyLoad.channel.noGeneCode')}}</span></div>
    <div class="link-info__wapper">
      <div class="link-info__edit">
        <el-button type="text" @click.stop="editItem" class="edit edit__update">
          <i class="icon iconfont icon-beizhu"></i>
        </el-button>
        <el-button type="text" @click.stop="deleteItem" class="edit edit__delete">
          <i class="icon iconfont icon-shanchu"></i>
        </el-button>
      </div>
      <ul class="link-info">
        <li>
          <span>{{$t('configLazyLoad.channel.sourceName')}} {{outLinkInfo.source}}</span>
        </li>
        <li>
          <span>URL: {{outLinkInfo.url}}</span>
        </li>
        <li>
          <a :href="allAccessUrl" :title="allAccessUrl" class="link-info__a" target="_blank">{{allAccessUrl}}</a>
        </li>
        <li v-if="outLinkInfo.imageUrl">
          <a :href="outLinkInfo.imageUrl" :download="imageName">{{$t('configLazyLoad.channel.downCode')}}</a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import qrcode from '@xkeshi/vue-qrcode'
  import { deepClone } from '@utils/m7Utils'
  export default {
    name: 'ShowOutLinkInfo',
    data () {
      return {
      }
    },
    props: {
      accessUrl: String,
      outLinkInfo: {
        type: Object,
        default: () => {
          return {
            _id: '',
            isQRcode: false,
            source: '',
            language: 'ZHCN',
            url: '',
            logo: {
              url: '',
              name: ''
            },
            agent: '',
            toPeer: '',
            imageUrl: ''
          }
        }
      }
    },
    methods: {
      deleteItem () {
        this.$emit('delete-item', this.outLinkInfo._id)
      },
      editItem () {
        let item = deepClone(this.outLinkInfo)
        this.$emit('edit-item', item)
      }
    },
    components: {
      qrcode
    },
    computed: {
      imageName () {
        return `${this.outLinkInfo.source}_${Math.floor(Math.random() * 1000)}_qrcode.png`
      },
      allAccessUrl () {
        let strNew = ``
        if (this.outLinkInfo.language) {
          strNew += `&language=${this.outLinkInfo.language}`
        }
        if (this.outLinkInfo.agent && this.outLinkInfo.toPeer) {
          strNew += `&otherParams={"agent":"${this.outLinkInfo.agent}","peerId":"${this.outLinkInfo.toPeer}"}`
        } else if (this.outLinkInfo.agent) {
          strNew += `&otherParams={"agent":"${this.outLinkInfo.agent}"}`
        } else if (this.outLinkInfo.toPeer) {
          strNew += `&otherParams={"peerId":"${this.outLinkInfo.toPeer}"}`
        } 
        return `${this.accessUrl}=${this.outLinkInfo.url}&urlTitle=${this.outLinkInfo.source}` + strNew
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../../../../assets/common.styl"
  .link-qrcode
    margin-right 16px
    border 1px solid $c-his-border
  .link-info-item
    border-top 1px solid $c-im-offline
    display flex
    padding 12px 4px
    .link-qrcode-image
      box-size(96px)
    .link-qrcode-image__div
      box-size(96px)
      background $cf-white
      color $cf-gray5
      text-align center
      line-height 96px
  .link-info__wapper
    flex 1
    position relative
    .link-info__edit
      position absolute
      top 0
      right 0
    .link-info
      li
        display flex
        line-height 24px
        .link-info__a
          width 80%
          display block
</style>
